<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href='http://fonts.useso.com/css?family=Ubuntu:300,400,500' rel='stylesheet' type='text/css'>
    <style rel="stylesheet">
        /* Standard syntax */

        body {
            background-color: #111;
        }
        .button-1 {
            margin: 100px auto;
            display: block;
            width: 150px;
            height: 150px;
            /* W3C */

            border-radius: 50%;
            background: linear-gradient(to bottom, #565656 0%, #353535 50%, #aaa 100%);
            position: relative;
        }
        .button-1 .button-2 {
            display: block;
            width: 134px;
            height: 134px;
            border-radius: 50%;
            background-color: #111;
            position: absolute;
            top: 8px;
            left: 8px;
        }
        .button-1 .button-2 .button-3 {
            display: block;
            width: 128px;
            height: 128px;
            border-radius: 50%;
            position: absolute;
            top: 3px;
            /* W3C */

            left: 3px;
            background: linear-gradient(135deg, #9ea3a9 0%, #676f76 50%, #494e54 100%);
        }
        .button-1 .button-2 .button-4 {
            display: block;
            width: 128px;
            height: 128px;
            border-radius: 50%;
            position: absolute;
            top: 0;
            /* W3C */

            left: 0;
            background: linear-gradient(to bottom, rgba(255, 255, 255, 0.35) 0%, rgba(132, 0, 0, 0) 50%, rgba(0, 0, 0, 0.25) 100%);
        }
        .button-1 .button-2 .button-4 .button-5 {
            cursor: pointer;
            display: block;
            width: 128px;
            height: 128px;
            border-radius: 50%;
            position: absolute;
            top: 0;
            /* W3C */

            left: 0;
            background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 66%, rgba(0, 0, 0, 0.9) 90%);
        }
        .button-1 .button-2 .button-4 .button-5 .button-6 {
            display: block;
            width: 128px;
            height: 128px;
            border-radius: 50%;
            position: absolute;
            display: none;
            top: 0;
            /* W3C */

            left: 0;
            background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.7) 99%, rgba(0, 0, 0, 0.9) 100%);
            -webkit-transition: all 500ms cubic-bezier(0.95, 0.05, 0.795, 0.035);
            -moz-transition: all 500ms cubic-bezier(0.95, 0.05, 0.795, 0.035);
            /* easeInExpo */

            -o-transition: all 500ms cubic-bezier(0.95, 0.05, 0.795, 0.035);
            /* Chrome, Safari, Opera */

            transition: all 500ms cubic-bezier(0.95, 0.05, 0.795, 0.035);
            -webkit-animation: mymove 0.3s;
            animation: mymove 0.3s;
            -webkit-animation-fill-mode: forwards;
        }
        .button-1 .button-2 .button-4 .button-5 .light {
            display: block;
            position: absolute;
            height: 10px;
            width: 28px;
            top: 23px;
            left: 50%;
            margin-left: -14px;
            border-radius: 4px;
            background-color: #333;
            -webkit-transition: all 250ms cubic-bezier(0.95, 0.05, 0.795, 0.035);
            -moz-transition: all 250ms cubic-bezier(0.95, 0.05, 0.795, 0.035);
            /* easeInExpo */

            -o-transition: all 250ms cubic-bezier(0.95, 0.05, 0.795, 0.035);
            transition: all 250ms cubic-bezier(0.95, 0.05, 0.795, 0.035);
        }
        .button-1 .button-2 .button-4 .button-5 .light.on {
            background-color: #7feb4f;
            -webkit-transition: all 550ms cubic-bezier(0.95, 0.05, 0.795, 0.035);
            -moz-transition: all 550ms cubic-bezier(0.95, 0.05, 0.795, 0.035);
            /* easeInExpo */

            -o-transition: all 550ms cubic-bezier(0.95, 0.05, 0.795, 0.035);
            transition: all 550ms cubic-bezier(0.95, 0.05, 0.795, 0.035);
            -webkit-box-shadow: 0px 0px 20px 0px #c8ef7d;
            -moz-box-shadow: 0px 0px 20px 0px #c8ef7d;
            box-shadow: 0px 0px 20px 2px #b2ef7d;
        }
        .button-1 .button-2 .button-4 .button-5 p {
            /* Firefox */

            -webkit-user-select: none;
            /* IE10+ */
            /* Rules below not implemented in browsers yet */

            -moz-user-select: none;
            -ms-user-select: none;
            -o-user-select: none;
            user-select: none;
            margin-top: 44px;
            letter-spacing: 1px;
            font-family: 'Ubuntu', sans-serif;
            color: #eee;
            text-transform: uppercase;
            text-align: center;
            font-weight: 300;
            font-size: 14px;
        }
        .button-1 .button-2 .button-4 .button-5 p span {
            margin-top: 3px;
            margin-bottom: -4px;
            display: block;
            /* Chrome, Safari, Opera */

            font-size: 18px;
        }
        @-webkit-keyframes mymove {
            0% {
                opacity: 0;
            }
            45% {
                opacity: 0.8;
            }
            65% {
                opacity: 0.8;
            }
            100% {
                opacity: 0;
            }
        }
        @keyframes mymove {
            0% {
                opacity: 0;
            }
            50% {
                opacity: 0.8;
            }
            75% {
                opacity: 0.8;
            }
            100% {
                opacity: 0;
            }
        }
    </style>

    <script src="../../js/jquery.js"></script>

</head>
<body>
<div class='button-1'>
    <div class='button-2'>
        <div class='button-3'>
            <div class='button-4'>
                <div class='button-5'>
                    <div class='button-6'></div>
                    <span class="light"></span>
                    <p unselectable="on">Engine
                        <span>Start</span>
                        <span>Stop</span>
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

<script>
    $('.button-3').on('mousedown', function() {
        $('.button-6').toggle(function() {
            $(this).hide();
        });
        $('.light').toggleClass('on');
    })
</script>


